import React, { Suspense, useEffect, useState } from "react";
import { Route, Routes, useNavigate, useParams, useSearchParams, useLocation, useMatch } from 'react-router-dom';
import routes from "./routes";
import store from "../store";

import { Mask , DotLoading, Toast} from "antd-mobile";
import action from "../store/action";

// 渲染内容的特殊处理(可以在此处做一些登录权限校验...)
const isCheckLogin = (path) => {
    let { base: { info } } = store.getState()
    let checkList = ['/personal', '/store', 'update']
    return !info && checkList.includes(path)
}
const Element = function Element(props) {
    let { component: Component, path ,meta} = props
    let isShow = !isCheckLogin(path)
    let [_, setRandom] = useState(0)

    useEffect(() => {
        if (isShow) return
        (async () => {
            let infoAction = await action.base.queryUserInfoAsync()
            let info = infoAction.info
            if (!info) {
                Toast.show({
                    inco: 'fail',
                    content: '请先登录'
                })
                console.log('login');
                // 没有登录跳转登录页
                navigate({
                    pathname: '/login',
                    content: '请先登录',
                    search: `?to=${path}`
                }, 
                {
                    replace: true
                })
                return
            }
            store.dispatch(infoAction)
            setRandom(+new Date())
        })()
    })

    // 修改页面title
    let { title = "知乎日报-WebApp" } = meta || {}
    document.title = title

        //把路由信息传递给组件，函数组件跟类组件都可以使用props来获取路由信息
        const navigate = useNavigate()
        let location = useLocation()
        let params = useParams()
        let [usp] = useSearchParams()
        return <>
            { isShow ? <Component navigate={navigate}
                        location={location}
                        params={params}
                        usp={usp} />
                    :
                    <Mask visible={true}>
                        <DotLoading color="white"></DotLoading>
                    </Mask>

             }
        </>
};

// // 递归创建路由规则
// const createRoute = function createRoute(routes) {
//     return <>
//         {routes.map((item, index) => {
//             return <Route key={index} path={item.path} element={<Element {...item} />}>
//                 {item.children ? createRoute(item.children) : null}
//             </Route>;
//         })}
//     </>;
// };

// 路由表管控
const RouterView = function RouterView() {
    return <Suspense fallback={
        <Mask visible={true} opacity="thick">
            <DotLoading color="white"/>
        </Mask>}>
        <Routes>
            {
                routes.map((item) => {
                    let { name, path } = item
                    return <Route key={name} path={path} 
                            element={<Element {...item}/>}>
                        </Route>
                })
            }
        </Routes>
    </Suspense>;
};
export default RouterView;
